<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <!--后台用户管理页面-->
    <title>公交管理系统</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/layuimini.css?v=2.0.4.2}" media="all">
    <link rel="stylesheet" th:href="@{/css/themes/default.css}" media="all">
    <link rel="stylesheet" th:href="@{/lib/font-awesome-4.7.0/css/font-awesome.min.css}" media="all">
    <style>
        .div-content{
            background-color: white;
            border-radius: 5px;
            padding: 15px;
        }
        .table-search-fieldset {
            margin: 0;
            border: 1px solid #e6e6e6;
            padding: 10px 20px 5px 20px;
            color: #6b6b6b;
        }
    </style>
</head>
<body>
    <div class="div-content">
        <!--显示数据-->
        <table id="table-emp" lay-filter="table-emp-filter"></table>
    </div>
    <!--新增删除按钮-->
    <script type="text/html" id="table-emp-toolbar">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">删除</button>
        </div>
    </script>
    <script type="text/html" id="col-emp-toolbar">
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <script th:src="@{/js/jquery.min.js}" charset="utf-8"></script>
    <script th:src="@{/layui/layui.js}" charset="utf-8"></script>
    <script th:inline="javascript">
        function refreshTable(){
            $("#btn-reset").click();
            $("#btn-search").click();
        }
        layui.use(['laydate','table','form','layer'], function(){
            var laydate = layui.laydate;
            var table = layui.table;
            var form = layui.form;
            var layer=layui.layer;
            var $=layui.jquery;
            // 表格头部工具栏监听
            table.on('toolbar(table-emp-filter)', function(obj){
                 if(obj.event == 'delete'){
                    var checkStatus = table.checkStatus('table-emp'); //idTest 即为基础参数 id 对应的值
                    // 如果没有选中任何数据
                    if(checkStatus.data.length == 0 ){
                        layer.alert('您没有选中任何数据', {icon: 2,anim:6,title:"警告" });
                        return false;
                    }
                    // 选中的id
                    var idArr = new Array();
                    $(checkStatus.data).each(function () {
                        idArr.push(this.id);
                    });
                    layer.confirm('您确认删除选中用户？', {icon: 3, title:'删除确认'}, function(index){
                        // 异步请求删除数据、结果提示、刷新表格
                        var url = "/user/" + idArr.join(",");
                        $.post(url,function (response) {
                            if(response.code == '200'){
                                layer.msg(response.message, {icon: 1});
                                table.reload('table-emp');
                            }else{
                                layer.alert(response.message, {icon: 2,anim:6 });
                            }
                        });
                        layer.close(index);
                    });
                }
            });
            //执行一个laydate实例
            laydate.render({
                elem: '.date' //指定元素
            });
            // 员工列表表格渲染
            table.render({
                elem: '#table-emp'
                ,url: '/user/getUserPageList' //数据接口
                ,page: true //开启分页
                ,toolbar: "#table-emp-toolbar"
                ,limits: [5,10,30,50,100]
                ,cols: [[ //表头
                    {type: "checkbox",width:60},
                    {field: 'id', title: '用户编号', width:120, sort: true,align: 'center'}
                    ,{field: 'username', title: '用户名', width:140,align: 'center'}
                    ,{field: 'nickname', title: '昵称', width:140, align: 'center'}
                    ,{field: 'phone', title: '手机号', width:200 ,align: 'center'}
                    ,{field: 'createTime', title: '注册时间', width:200 ,align: 'center'}
                    ,{title: '操作', width: 150,toolbar: '#col-emp-toolbar'}
                ]]
            });
            // 监听操作列
            table.on('tool(table-emp-filter)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                if(layEvent == 'del'){
                    layer.confirm('您确认删除该用户？', {icon: 3, title:'删除确认'}, function(index){
                        // 异步请求删除数据、结果提示、刷新表格
                        var url = "/user/" + data.id;
                        $.post(url,function (response) {
                            if(response.code == '200'){
                                layer.msg(response.message, {icon: 1});
                                // refreshTable();
                                table.reload('table-emp');
                            }else{
                                layer.alert(response.message, {icon: 2,anim:6 });
                            }
                        });

                        layer.close(index);
                    });
                }
            });
        });
    </script>
</body>
</html>
